<template>
    <el-container>
        <el-main class="wrapper">
            <section class="panel cms-content">
                <div class="panel-body">
                    <div class="panel-header">
                        订单详情
                    </div>
                    <el-form v-if="orderInfo" ref="form" label-width="200px">
                        <el-form-item label="订单编号:">
                            {{orderInfo.order_id}}
                        </el-form-item>
                        <el-form-item label="订单进度:">
                            <span v-html="orderInfo.status_text"></span>
                        </el-form-item>
                        <el-form-item label="联系人:">
                            {{orderInfo.user_plain_name}}
                        </el-form-item>
                        <el-form-item label="联系方式:">
                            {{orderInfo.user_plain_mobile}}
                        </el-form-item>
                        <el-form-item label="联系地址:">
                            {{orderInfo.user_plain_address}}
                        </el-form-item>
                        <el-form-item label="订单标题:">
                            {{orderInfo.title}}
                        </el-form-item>
                        <el-form-item label="订单详情:">
                            {{orderInfo.reason}}
                        </el-form-item>
                        <el-form-item label="创建时间:">
                            {{orderInfo.created_at}}
                        </el-form-item>
                        <el-form-item label="报修附图:">
                            <img v-if="orderInfo.images.length" style="width: auto;height: 250px;margin-right: 10px" v-for="image in orderInfo.images" :key="this" :src="image" alt="">
                        </el-form-item>
                        <el-form-item label="维修方案及费用预算照片:">
                            <img v-if="orderInfo.imgs.length" style="width: auto;height: 250px;margin-right: 10px" v-for="img in orderInfo.imgs" :key="this" :src="img" alt="">
                        </el-form-item>
                        <el-form-item v-if="orderInfo.status == 1" label="维修师傅:">
                            <el-select size="medium" v-model="user_repair_id" >
                                <el-option label="请选择维修师傅" value=""></el-option>
                                <el-option v-for="(repair,index) in repairsArr" :key="index" :label="repair.username"
                                           :value="repair.openid"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item v-if="orderInfo.status > 1" label="维修师傅:">
                            {{orderInfo.user_repair_name}}（ {{orderInfo.user_repair_mobile}}）
                        </el-form-item>
                        <el-form-item label="订单评价:">
                            <!--<el-rate-->
                                    <!--v-model="orderInfo.start"-->
                                    <!--:icon-classes="['icon-rate-face-1', 'icon-rate-face-2', 'icon-rate-face-3']"-->
                                    <!--void-icon-class="icon-rate-face-off"-->
                                    <!--:colors="['#99A9BF', '#F7BA2A', '#FF9900']">-->
                            <!--</el-rate>-->
                            <el-rate style="margin-top: 10px"
                                    v-model="orderInfo.start"
                                    disabled
                                    text-color="#ff9900">
                            </el-rate>
                        </el-form-item>
                        <el-form-item label="实际费用:">
                            {{orderInfo.money}} 元
                        </el-form-item>
                        <el-form-item label="维修完成图片:">
                            <img v-if="orderInfo.finish_imgs.length" style="width: auto;height: 250px;margin-right: 10px" v-for="fimg in orderInfo.finish_imgs" :key="this" :src="fimg" alt="">
                        </el-form-item>
                        <el-form-item v-if="orderInfo.money_img" label="实际费用图:">
                            <img style="width: auto;height: 250px;" :src="orderInfo.money_img" alt="">
                        </el-form-item>
                        <el-form-item>
                            <el-button v-if="orderInfo.status == 1" type="primary" @click="update">分配师傅</el-button>
                            <el-button v-if="orderInfo.status == 3" type="primary" @click="agree">审批通过</el-button>
                            <el-button v-if="orderInfo.status == 5" type="primary" @click="confirm">确认完成</el-button>
                            <el-button v-if="orderInfo.status == 3" type="primary" @click="refuse">审批拒绝</el-button>
                            <el-button @click="goback">返回列表</el-button>
                        </el-form-item>
                    </el-form>
                </div>
            </section>
        </el-main>
    </el-container>
</template>
<script>
    import {mapGetters} from 'vuex';
    import {
        OrderInfo,
        UserRepairs,
        OrderRepair,OrderAgree,OrderRefuse,OrderConfirm
    } from '@/utils/request';
    export default {
        data() {
            return {
                orderInfo: null,
                repairsArr:[],
                user_repair_id:'',
            }
        },
        activated() {
            this.$store.dispatch('setActive', '/main');
            //给新增的加applet，并且清空formData
            this.info();
            this.repairs();
        },
        computed: {
            ...mapGetters(['loading', 'upload']),
        },
        methods: {
            repairs() {
                UserRepairs().then((res) => {
                    if (res.code) {
                        this.$message.error(res.msg);
                    } else {
                        this.repairsArr = res.data;
                    }
                });
            },
            agree(){
                OrderAgree({id:this.$route.query.id}).then((res)=>{
                    if (res.code) {
                        this.$message.error(res.msg);
                    } else {
                        this.$router.push({name:'Order'})
                    }
                })
            },
            confirm(){
                OrderConfirm({id:this.$route.query.id}).then((res)=>{
                    if (res.code) {
                        this.$message.error(res.msg);
                    } else {
                        this.$router.push({name:'Order'})
                    }
                })
            },
            refuse(){
                OrderRefuse({id:this.$route.query.id}).then((res)=>{
                    if (res.code) {
                        this.$message.error(res.msg);
                    } else {
                        this.$router.push({name:'Order'})
                    }
                })
            },
            goback(){
                this.$router.push({name:'Order'});
            },
            info() {
                OrderInfo({params: {id: this.$route.query.id}}).then((res) => {
                    if (res.code) {
                        this.$message.error(res.msg);
                    } else {
                        //链接形式的内容修改
                        this.orderInfo = res.data;
                    }
                });
            },
            //更新
            update() {
                OrderRepair({repair:this.user_repair_id,id:this.$route.query.id}).then((res)=>{
                    if (res.code) {
                        this.$message.error(res.msg);
                    } else {
                        this.$router.push({name:'Order'})
                    }
                })
            },
        },
    }
</script>
